<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue动态改变样式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .mydiv{
            width: 200px;
            height: 200px;
            background-color: black;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .blue{
            background-color: blue;
        }
        .mywidth{
            width: 450px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 通过给html元素的 class 属性绑定 vue 中的属性值，得到样式的动态绑定 -->
    <div class="mydiv" v-bind:class="{red:temp}"></div>
    <br>
    <!-- 通过 computed 返回一个对象，对象里放着多个键值对 -->
    <div class="mydiv" :class="myClassesDiv"></div>
    <br>
    <div class="mydiv"></div>
    <button type="button" @click="temp=!temp">点我</button>
</div>

<script type="text/javascript">
    // Vue的实例
    new Vue({
        el: "#app",    // 接管哪一个元素，和该元素绑定
        data: {        // 数据
            temp: false,
        },
        computed:{
            myClassesDiv:function () {
                return{
                    red:this.temp,
                    mywidth:this.temp
                }
            }
        }
    })
</script>
</body>